<template>
  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="site-navbar__brand-lg" href="javascript:;">
          <img src="../assets/img/logo.png" alt="" />
          <!-- <img v-if="styleFlagS === 'dark'" src="../assets/img/logo.png" alt="" />
          <img v-else src="../assets/img/avatar.png" alt="" /> -->
        </a>
        <a class="site-navbar__brand-mini" href="javascript:;">
          <img src="../assets/img/logo-dx.png" alt="" />
          <!-- <img v-if="styleFlagS === 'dark'" src="../assets/img/logo-dx.png" alt="" />
          <img v-else src="../assets/img/avatar.png" alt="" /> -->
        </a>
      </h1>
    </div>
    <div class="site-navbar__body clearfix">
      <el-menu class="site-navbar__menu" mode="horizontal">
        <el-menu-item
          class="site-navbar__switch"
          index="0"
          @click="sidebarFold = !sidebarFold"
        >
          <icon-svg name="zhedie" class="iconSvg"></icon-svg>
        </el-menu-item>
      </el-menu>
      <el-menu
        class="site-navbar__menu mode2"
        mode="horizontal"
        v-if="ismodeShow"
      >
        <el-menu-item
          class="site-navbar__switch"
          index="1"
          @click="handleStyle()"
        >
          <span class="shaky">
            <!-- <img src="~@/assets/img/style_logo.png" alt="" /> -->
            <img src="~@/assets/img/logo_style.png" alt="" />
          </span>
        </el-menu-item>
        <el-menu-item
          class="site-navbar__switch"
          index="1"
          @click="handleWarning()"
        >
          <span class="shaky">
            <img src="~@/assets/img/logo-b-two.png" alt="" />
            <span class="num">+{{ querynumber }}</span>
          </span>
        </el-menu-item>
      </el-menu>
      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal"
      >
        <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link">
              <img src="~@/assets/img/avatar.png" :alt="userName" />{{
                userName
              }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updatePasswordHandle()"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item @click.native="logoutHandle()"
                >退出</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
      <div class="bgImg" v-if="courseImgShow">
        <!-- <el-dialog width="100%" :visible.sync="courseImgShow"> -->
        <div class="courseImg couseDiv">
          <div @click="choiceOne" class=""></div>
          <div @click="choiceTow"></div>
        </div>
        <!-- </el-dialog> -->
      </div>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password
      v-if="updatePassowrdVisible"
      ref="updatePassowrd"
    ></update-password>
    <!-- 消息中心 -->
    <el-dialog title="消息中心" :visible.sync="isWarning" width="20%;">
      <!-- 送审报送 -->
      <div class="major">
        <div v-for="(item, index) in modeList" :key="index">
          <div class="major-box" @click="handleMajor(item.sceneName)">
            <div>场景名称:{{ item.sceneName }}</div>
            <div>
              <span>接入方名称:{{ item.manufactorName }}</span>
              <span style="float: right">创建日期:{{ item.createTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <apikeyDialog ref="apikeyDialog" @getLingNum="getLingNum"></apikeyDialog>
  </nav>
</template>

<script>
import UpdatePassword from "./main-navbar-update-password";
import apikeyDialog from "@/views/modules/duApikey/apikeyDialog.vue";
import { clearLoginInfo } from "@/utils";
export default {
  data() {
    return {
      updatePassowrdVisible: false,
      courseImgShow: false,
      isWarning: false,
      ismodeShow: false,
      querynumber: null,
      modeList: [], //送审发送过来的数据
      // styleFlag: "dark", //默认色
    };
  },
  components: {
    UpdatePassword,
    apikeyDialog,
  },
  computed: {
    navbarLayoutType: {
      get() {
        return this.$store.state.common.navbarLayoutType;
      },
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold;
      },
      set(val) {
        this.$store.commit("common/updateSidebarFold", val);
      },
    },
    mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      },
    },
    staffAccount: {
      get() {
        return this.$store.state.user.staffAccount;
      },
      set(val) {
        this.$store.commit("user/updateStaffAccount", val);
      },
    },
    userName: {
      get() {
        return this.$store.state.user.name;
      },
    },
    styleFlagS: {
      get() {
        return this.$store.state.user.styleFlag;
      },
      set(val) {
        this.$store.commit("user/updateStyleFlag", val);
      },
    },
  },
  created() {
    // this.getLing();
    this.getLingNum();
    let seeStyle = window.sessionStorage.getItem("styleFlagS")
    if (seeStyle) {
      this.styleFlagS = seeStyle;
    }
  },
  watch: {
    styleFlagS(newV, oldV) {
      console.log("123");
      var head = document.getElementsByTagName("head")[0];
      var lastNodeName = head.lastChild.nodeName.toLocaleLowerCase();
      console.log(newV, "主题");
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.type = "text/css";
      link.id = "bigLink";
      try {
        if (newV == "light") {
          // link.href = "./light.css";
          link.href = window.SITE_CONFIG.version+"/static/css/light.css";
          head.appendChild(link);
        } else {
          // 有时候刷新后会多一个link 所以删俩次
          head.removeChild(document.querySelector("#bigLink"));
          head.removeChild(document.querySelector("#bigLink"));
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
  methods: {
    //切换风格
    handleStyle() {
      this.styleFlagS = this.styleFlagS == "dark" ? "light" : "dark";
      window.sessionStorage.setItem("styleFlagS",this.styleFlagS)
      console.log("this.styleFlag==", this.styleFlagS);
    },
    handleWarning() {
      this.getLing();
      // this.getShenheList();
      this.isWarning = true;
    },
    //点击教程指导
    handleButton() {
      this.courseImgShow = true;
    },
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true;
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init();
      });
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/sys/logout"),
            method: "post",
            data: this.$http.adornData(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              clearLoginInfo();
              this.$router.push({ name: "login" });
            }
          });
        })
        .catch(() => {});
    },
    //小铃铛数量接口
    getLingNum() {
      this.$http({
        url: this.$http.adornUrl("/cpcpManufactorScene/sendCount"),
        method: "get",
        params: this.$http.adornParams({
          staffCount: this.staffAccount,
        }),
      }).then((res) => {
        if (res.data.code === 0) {
          this.ismodeShow = true;
          console.log("res===", res);
          if (
            res.data.data === null ||
            res.data.data === "" ||
            res.data.data === 0
          ) {
            this.querynumber = null;
          } else {
            this.querynumber = res.data.data;
          }
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //获取小铃铛列表数据(送审发送过来的数据)
    getLing() {
      this.$http({
        url: this.$http.adornUrl("/cpcpManufactorScene/oneList"),
        method: "get",
        params: this.$http.adornParams({
          staffCount: this.staffAccount,
        }),
      }).then((res) => {
        if (res.data.code === 0) {
          // console.log("res===", res);
          this.modeList = res.data.data;
          // this.modeList.length > 0
          //   ? (this.ismodeShow = true)
          //   : (this.ismodeShow = false);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //点击小铃铛列表数据（送审数据）
    handleMajor(sceneName) {
      console.log("hhhh", sceneName);
      let dataOnj = {};
      this.$http({
        url: this.$http.adornUrl("/cpcpManufactorScene/getsceneName"),
        method: "get",
        params: this.$http.adornParams({
          sceneName: sceneName,
        }),
      }).then((res) => {
        if (res.data.code === 0) {
          // this.modeList = res.data.data;
          dataOnj = res.data.data;
          console.log("dataOnj=", dataOnj);
          this.isWarning = false;
          this.$nextTick(() => {
            this.$refs.apikeyDialog.init(dataOnj);
          });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>
<style scoped>
.site-navbar__brand .site-navbar__brand-lg img {
  /* width: 36px !important; */
  height: 36px !important;
}
.courseImg {
  width: 100%;
  height: 75vh;
  background: #000 url("~@/assets/courseImg/choice.jpg") no-repeat;
  background-size: 100% 98%;
}
.mode2 {
  position: absolute;
  right: 161px;
}
/* .mode2:hover{
  background: red;
} */
.site-navbar__switch:hover .num {
  /* color: red; */
}
.site-navbar__switch:hover {
  /* background: rgb(13,45,105) !important; */
  /* color: red; */
  background-color: #000;
}
.shaky {
  position: relative;
}
.shaky .num {
  position: absolute;
  top: -24px;
  left: 30px;
  font-size: 16px;
  /* color: #fff; */
  color: rgb(62, 142, 247);
}
.iconSvg {
  color: rgb(62, 142, 247);
}
.shaky img {
  width: 30px;
  height: 30px;
}
.major .major-box {
  background-color: rgba(20, 70, 161, 0.9);
  /* height: 54px; */
  padding: 10px;
  margin-top: 5px;
  color: #fff;
}
</style>
